<template>
  <v-menu :offset="14" location="bottom center">
    <template #activator="{props}">
      <div v-if="userInfo?.userId">
        <v-btn icon v-bind="props" size="40">
          <v-avatar :image="userInfo?.avatarUrl" size="40"></v-avatar>
        </v-btn>
      </div>
      <div v-else class="font-size-18">
        <span class="cursor-pointer" @click="toLogin" :class="{ 'text-primary': activeNav === 12 }" >&nbsp;登录&nbsp;&nbsp;</span>
        |
        <span class="cursor-pointer" @click="toRegister" :class="{ 'text-primary': activeNav === 13 }">&nbsp;&nbsp;注册&nbsp;</span>
      </div>

    </template>
    <v-card width="210" class="pa-4 pb-0">
      <div class="d-flex align-center justify-center">
        <v-avatar :image="userInfo?.avatarUrl" size="40"></v-avatar>
        <div class="ml-3">
          <div v-if="userInfo.nickName" class="font-size-14">{{ userInfo.nickName }}</div>
          <div v-if="userInfo.userId" class="font-size-12 text-grey">ID:{{ userInfo.userId }}</div>
        </div>
      </div>
      <v-divider class="mt-4"></v-divider>
      <v-list density="compact" active-color="primary" style="box-shadow:none !important" elevation="0">
        <v-list-item v-ripple class="cursor-pointer " @click="toUser">
          <div class="d-flex align-center font-size-14 justify-center">
            <v-icon class="mr-1" icon="mdi-account-circle-outline" size="14"></v-icon>
            个人中心
          </div>
        </v-list-item>
        <v-divider></v-divider>
        <v-list-item v-ripple class="cursor-pointer " @click="loginOut">
          <div class="text-center d-flex align-center font-size-14 justify-center">
            <v-icon icon="mdi-power" size="16" class="mr-1"></v-icon>
            退出登录
          </div>
        </v-list-item>
      </v-list>

    </v-card>

  </v-menu>
</template>

<script setup>
import {ref, computed, watch, onMounted} from 'vue'
import {useRoute, useRouter} from "vue-router";
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/userStore';

const route = useRoute();
const router = useRouter();
const props = defineProps(['activeNav']);
const emit = defineEmits(['changeNav']);
const activeNav = ref(props.activeNav);
watch(() => props.activeNav, (val) => {
  if (val && val <= 11){
    activeNav.value = null;
  }
    }, {
      immediate: true
    }
)

const {userInfo} = storeToRefs(useUserStore());

function toLogin(){
  activeNav.value = 12;
  emit('changeNav', activeNav.value);
router.push({name:"Login"});

}

function toRegister(){
  activeNav.value = 13;
  emit('changeNav', activeNav.value);
}




async function loginOut() {
  userInfo.value = {};
}

function toUser() {
  router.push({
    name: "user"
  })
}

</script>

<style scoped lang="scss">
.avatar {
  border-radius: 50%;

}

.avatar-isVip {
  border: 1px solid rgb(var(--v-theme-primary));
  position: relative;

  &:after {
    position: absolute;
    bottom: -2px;
    right: -2px;
    content: '';
    width: 14px;
    height: 14px;
    background-size: cover;
  }
}

  .active-nav {
    position: relative;

    &:after {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      content: '';
      background-color: currentColor;
      width: 50px;
      height: 2px;
      border-radius: 2px;
  }
}

</style>
